<template>
  <view class="content">
    <view class="content-header">
       <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
      <u-action-sheet :show="show" :actions="columns" title="请选择" @close="show = false" @select="sexSelect"></u-action-sheet>
     <!--  <u-button @click="show = true">类型查询</u-button> -->
     <view  class="bumen">部门类型   <u-button @click="show = true">类型查询</u-button></view>
    </view>
    <!-- //列表区域 -->
    <view class="content-workList">
    <view class="workcontent" v-for="item in workList" :key="item.id" @click="workDetails(item)">
   <view class="header-content" >
     <text style="font-size: 30rpx; font-weight: bold; color: #000000;">{{ item.jobName }}<text style="font-size: 20rpx; color: #808080;">( {{ item.jobType.keyWord + item.jobNum }})</text></text>
     <text style="font-size: 32rpx;font-weight: bold; color: #02a7f0;">{{ item.startSalary }} - {{ item.endSalary }}元</text>
   </view>
   <view class="header-body">
     <text style="margin-right: 20rpx; font-size: 22rpx; color: #808080;">{{ item.jobType.typeName }}</text>
     <text style="font-size: 22rpx; color: #808080;">招聘{{ item.recruitmentNum }}人</text>
   </view>
   <view class="header-fotter" >
     <view class="tag" v-for="(item1,index) in item.keyList" :key="index">{{item1}}</view>
   </view>
 </view>
    </view>
    <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      columns: [],
      workList: [],
      datachange: {
        equipment: 0,
        jobType: null,
        jobTypeId: null,
        pageIndex: 1,
        pageSize: 10,
        queryString: '',
        recruitmentType: 1
      },
      status: 'loadmore',
      loadingText: '加载中',
      loadmoreText: '上拉加载',
      nomoreText: '暂无更多'
    };
  },
  onLoad() {
    this.getworkList();
    this.getdata();
  },
  
  onReachBottom() {
    console.log(123);
    this.datachange.pageSize = this.datachange.pageSize + 10;
    this.status = 'loading';
    this.getworkList();
    this.status = 'nomore';
  },
  methods: {
    async getworkList() {
      const { data } = await uni.$http.post('/job/findPage', this.datachange);
      console.log('我是工作列表=-==>', data);
      if (data.statusCode !== 200) {
        return;
      } else {
        this.workList = data.data.data;
      }
    },
    async getdata() {
      const { data } = await uni.$http.get('/jobType/findAll');
      console.log('jishugangwei', data.data);
      const res = data.data;
      let arr = [];
     

      res.forEach(item => {
          console.log(item);
          arr.push({
            name: item.typeName,
            id: item.id
          });
        });
        
      arr.unshift({
      name:'全部' , 
      id:0
      })
         this.columns = arr;
    },
    // 工作详情
    workDetails(item) {
      uni.navigateTo({
        url: '../../components/workDetails/workDetails?item=' + JSON.stringify(item)
      });
    },
    //查询
    sexSelect(e) {
      console.log(e);
      this.show = false;
      this.datachange.jobTypeId = e.id;
      if(e.id === 0) {
        this.datachange.jobTypeId = null
      }
      this.getworkList();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  .content-header {
    position: relative;
    height: 400rpx;
    image {
      width: 100%;
      height: 350rpx;
    }
    /deep/.u-button--square.data-v-3bf2dba7 {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    /deep/.u-button.data-v-3bf2dba7 {
    width: 300rpx;
    margin: 0;
    margin-left: 20rpx;
    }
    .bumen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100rpx;
      display: flex;
	  box-sizing: border-box;
      align-items: center;
      padding: 0 200rpx;
      color: #FFFFFF;
    }
  }

  .content-workList {
    position: absolute;
    top: 100rpx;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    padding: 0 20rpx;
    .workcontent {
      // height: 200rpx;
      border-radius: 20rpx;
      background-color: #FFFFFF;
      box-shadow: 0 0 20rpx #ccc;
      padding:  20rpx;
      display: flex;
      margin-bottom: 10rpx ;
      flex-direction: column;
      .header-content {
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .header-body {
        margin-top: 15rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .header-fotter {
        margin-top: 25rpx;
        display: flex;
        flex-wrap: wrap;
        .tag {
          font-size: 20rpx;
          margin-right: 10rpx;
          width:fit-content;
          color: #7f7f7f;
          box-sizing: border-box;
          padding: 10rpx;
          border-radius: 5rpx;
          background-color: #f1f1f1;
          
        }
      }
    }
  }
}
</style>
